<template>
  <view class="accountingBook">
    <!-- 头部 -->
    <s-header-title ref="headerTitle" title="家庭记账本" :is-click="false" is-fixed
                  :z-index="10"
                  :background="'#FF7950'" :titleColor="'#FFFFFF'" isDisplayBack showFIcon
                  @getPageHeight="getPageHeight">
    </s-header-title>
    <view :style="{height:`${page.headerHeight}px`}"></view>
    <view class="headBackground flex flex-column align-center wh_750">
      <view class="hW_38"></view>
      <view class="wh_702">
        <view class="book_type flex align-center justify-center" @click.stop="openPopup">
          {{ select_type }}
        </view>
      </view>
      <view class="hW_30"></view>
      <view class="wh_702 flex align-center justify-between">
        <picker class="time_select flex align-center" mode="date" fields="month" @change="timeChange($event)">
          <view class="flex align-center ml_24">
            <view>{{ page.select_time }}</view>
            <image :src="`${IMG_URL}/index/time_select_book.png`"></image>
          </view>
        </picker>
        <view class="book_detail flex align-center mr_24">
          <view class="list" :class="index == 0 ? '' : 'ml_72 mr_24'" v-for="(item,index) in page.book_detail"
                :key="index">
            {{ item.name }}￥{{ item.money }}
          </view>
        </view>
      </view>
    </view>
    <scroll-view class="book_scroll wh_750" scroll-y :style="{
      height: `calc(100vh - ${page.headerHeight}px - 180rpx)`
    }">
      <view class="flex flex-column align-center">
        <view class="hW_34"></view>
        <view class="flex flex-column align-center" v-for="(item,index) in page.book_list" :key="index">
          <view class="book_list">
            <view class="flex align-center justify-between ml_20 mr_20">
              <view class="flex align-center">
                <image :src="`${IMG_URL}/index/book_date_icon.png`" style="width: 27rpx;height: 27rpx;"></image>
                <view class="text_style ml_10">
                  {{ dayjs(item.day).format('MM月DD日') }}
                </view>
                <view class="text_style ml_10">
                  {{ dayjs(item.day).format('dddd') }}
                </view>
              </view>
              <view class="flex align-center">
                <view class="text_style">
                  收入 {{ item.income }}
                </view>
                <view class="text_style mr_4 ml_48">
                  支出 {{ item.expenditure }}
                </view>
              </view>
            </view>
            <view class="hW_19"></view>
            <view class="list flex justify-between mt_19" v-for="(item1,index1) in item.list" :key="index1"
                  @click.stop="goToDetail(item1)">
              <view class="left flex align-center">
                <image style="width: 80rpx;height: 80rpx;" :src="item1.type_image_active"></image>
                <view class="flex flex-column justify-between ml_17">
                  <view class="name mt_9">{{ item1.type_name }}</view>
                  <view class="remark mb_7 mt_18"
                        style="width: 250rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;"
                  >
                    {{ item1.description }}
                  </view>
                </view>
              </view>
              <view class="right flex flex-column align-end justify-between">
                <view class="mt_14" :style="{
                  color: item1.type == 0 ? '#FF4206' : '#4CC93B'
                }">{{ item1.type == 2 ? `-${item1.money}` : `+${item1.money}` }}元
                </view>
                <view class="mb_7 remark">
                  {{ !!item1.updatetime ? dayjs(item1.updatetime * 1000).format('YYYY年MM月DD日 HH:mm:ss') : dayjs(item1.createtime * 1000).format('YYYY年MM月DD日 HH:mm:ss')
                  }}
                </view>
              </view>
            </view>
          </view>
          <view class="hW_17"></view>
        </view>
        <view class="hW_200"></view>
      </view>
    </scroll-view>

    <view class="book_button flex align-center justify-center" @click.stop="chargeUpPath">
      <image :src="`${IMG_URL}/index/book_jilu_icon.png`" class="mr_16"></image>
      我要记账
    </view>

    <SBetterBalendar class="z-999" :maxYear="new Date().getFullYear()" :isSwitch="false"
                     ref="betterCalendarRef"
                     :showCalendar="showCalendar"
                     @confirm="selectDate"
                     @cancel="showCalendar = false"
    ></SBetterBalendar>

    <uni-popup ref="type_popup" type="bottom">
      <view class="typePopup">
        <view class="typePupop_head flex justify-between align-center">
          <view class="title ml_44">记账类型</view>
          <image @click="closePopup" class="mr_44" :src="`${IMG_URL}/index/jiatingjizhangben_icon_close.png`"></image>
        </view>
        <view class="hW_28"></view>
        <scroll-view :scroll-y="true" class="typePopup_scroll">
          <view class="flex flex-column align-center">
            <view class="typeList">
              <view class="list flex flex-column align-center" v-for="(item,index) in page.list" :key="index"
                    @click.stop="setImageIndex(index)">
                <image
                  :src="page.select_icon_index == index ? `${nc_image}${item.image_active}` : `${nc_image}${item.image}`"></image>
                <view class="fs_26 fw_500 color_696969 mt_26">{{ item.name }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="hW_28"></view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
  import SBetterBalendar from '@/sheep/components/s-better-calendar/s-better-calendar.vue';
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import { computed, reactive, ref, watch } from 'vue';
  import sheep from '@/sheep';
  import dayjs from 'dayjs';
  import { onLoad, onShow } from '@dcloudio/uni-app';

  const _currentTime = new Date(dayjs(new Date().getTime()).format('YYYY-MM')).getTime();
  const currentTime = dayjs(new Date().getTime()).format('YYYY年MM月');
  const type_popup = ref();

  const page = reactive({
    options: {},
    headerHeight: 0,
    type_list: [
      { name: '全部类型' },
      { name: '收入' },
      { name: '支出' },
    ],
    type_index: 0,
    select_time: currentTime,
    currentTime: _currentTime,
    book_detail: [
      {
        name: '收入',
        type: 'income',
        money: 0,
      },
      {
        name: '支出',
        type: 'expend',
        money: 0,
      },
    ],
    book_list: [],
    list: [],
    select_icon_index: -1,
  });

  const select_type = computed(() => {
    if (page.select_icon_index == -1) {
      return '全部类型';
    }
    return page.list[page.select_icon_index].name;
  });
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  onLoad((options) => {
    page.options = options;
    getMoment();
  });

  onShow(async () => {
    await getBookList();
  });

  async function getMoment() {
    let { data } = await sheep.$api.family.getAccountType({ page: 0 });
    let arr = data.sort((a, b) => {
      return b.weigh - a.weigh;
    });
    page.list = arr;
  }

  async function chargeUpPath() {
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg)
      return;
    }
    sheep.$router.go('/pages/family/foundCheck', {
      family_id: page.options.family_id,
      index: page.select_icon_index
    });
  }

  async function getBookList() {
    let { data } = await sheep.$api.family.getAccountList({
      family_id: page.options.family_id,
      date: dayjs(page.currentTime).format('YYYY-MM'),
      type_id: page.select_icon_index != -1 ? page.list[page.select_icon_index].id : '',
    });
    page.book_list = data.list;
    page.book_detail[1].money = data.expenditure.toFixed(2);
    page.book_detail[0].money = data.income.toFixed(2);
  }

  async function timeChange(e) {
    page.select_time = dayjs(e.detail.value).format('YYYY年MM月');
    page.currentTime = new Date(e.detail.value).getTime();
    await getBookList();
  }

  async function goToDetail(info) {
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg)
      return;
    }
    uni.setStorageSync('family_book_detail', JSON.stringify(info));
    sheep.$router.go('/pages/family/foundCheck', { is_detail: 1, family_id: page.options.family_id });
  }

  function openPopup() {
    type_popup._value.open();
  }

  function closePopup() {
    type_popup._value.close();
  }

  async function setImageIndex(index) {
    page.select_icon_index = index;
    type_popup._value.close();
    await getBookList();
  }
</script>


<style scoped lang="scss">
  .accountingBook {

    .headBackground {
      height: 180rpx;
      background: #FF7950;
      padding: 0 0;
      margin: auto;

      .book_type {
        width: 200rpx;
        height: 59rpx;
        background: rgba(255, 255, 255, 0.19);
        border-radius: 41rpx 41rpx 41rpx 41rpx;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
      }

      .time_select {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;

        image {
          width: 32rpx;
          height: 28rpx;
        }
      }

      .book_detail {
        .list {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 24rpx;
          color: #FFFFFF;
          white-space: nowrap;
        }
      }
    }

    .book_scroll {
      /* #ifdef H5 */
      margin: auto;
      /* #endif */
      .book_list {
        width: 702rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        padding: 41rpx 0 33rpx 0;

        .list {
          margin: 0 20rpx;
          height: 102rpx;
          background: #F8F8F8;
          border-radius: 12rpx 12rpx 12rpx 12rpx;
          padding: 10rpx 16rpx 10rpx 12rpx;

          .remark {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            font-size: 24rpx;
            color: #9F9F9F;
          }
        }
      }

      .text_style {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 30rpx;
        color: #4B4B4B;
      }
    }

    .book_button {
      width: 362rpx;
      height: 80rpx;
      background: #FF4206;
      border-radius: 50rpx 50rpx 50rpx 50rpx;
      position: fixed;
      z-index: 10;
      bottom: 72rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 30rpx;
      font-weight: 500;
      color: #FFFFFF;

      image {
        width: 30rpx;
        height: 32rpx;
      }
    }

    .typePopup {
      /* #ifdef H5 */
      margin: auto;
      /* #endif */
      width: 750rpx;
      height: 800rpx;
      background: #FFFFFF;
      border-radius: 20rpx 20rpx 0rpx 0rpx;

      .typePupop_head {
        /* #ifndef H5 */
        width: 750rpx;
        /* #endif */
        height: 115rpx;
        background: #FFF8E8;
        border-radius: 20rpx 20rpx 0rpx 0rpx;
        padding: 0 40rpx;

        .title {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 48rpx;
          color: #4B4B4B;
        }

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .typePopup_scroll {
        height: 625rpx;
      }
    }

    .typeList {
      width: 702rpx;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-row-gap: 51rpx;
      grid-column-gap: 30rpx;


      .list {
        white-space: nowrap;

        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }
  }
</style>
